import React from 'react';
import { connect } from 'react-redux' // 引入连接器

const TodoList = (props) => {
    let {inputValue, inputChange, addItem, delItem, list} = props;
    return (
        <div>
            <div>
                <input value={inputValue} onChange={inputChange}/>
                <button onClick={addItem}>提交</button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                    return (  <li key={index} onClick={() => {delItem(index)}}>{item}</li>)
                    })
                }
            </ul>
        </div>
    )

   
}

// 映射关系
const stateToProps = (state) => {
    return {
        list:state.list,
        inputValue: state.inputValue
    }
}

// 映射关系
const dispatchToProps = (dispatch) => {
    return {
        inputChange (e) {
            console.log(e.target.value)
            const action = {
                type:'change_input',
                value: e.target.value
            }
            dispatch(action)
        },

        addItem () {
            const action = { type:'add_item'}
            dispatch(action)
        },

        delItem (index) {
            console.log(index)
            const action = {
                type:'del_item',
                index
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps,dispatchToProps)(TodoList);